<template>
  <div id="build">
    <div class="process">
      <img src="../../../assets/images/公司设立流程.png">
    </div>
    <div class="step">
      <div style="text-align: left;margin: 10px 0">请点击核名开始依次购买：</div>
      <div style="display: flex">
        <el-button class="stepItem"
                   @click="purchase(item)"
                   v-for="item in product">
          <div class="title"><h3>{{item.name}}</h3></div>
          <div class="money">￥{{item.price}}</div>
        </el-button>
      </div>

    </div>
    <div class="total">
      <div style="text-align: left;margin: 10px 0">或者选择打包购买：</div>
      <div style="width: 80%; display: flex;background-color: #d7d9db;margin: 10px 0">
        <el-button class="totalItem"
                   disabled
                   v-for="item in product">
          <div class="title"><h3>{{item.name}}</h3></div>
          <div class="money">￥{{item.price}}</div>
        </el-button>
        <div class="purchase">
          <div><span>打包价格：</span><span style="font-size: 25px;color: red">￥{{totalPrice}}</span></div>
          <el-button type="primary"
                     @click="purchase({name:'全部',price:totalPrice})"
                     style="width: 130px;height: 30px;margin-top: 20px;padding: 0">一键购买</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CompanyBuild",
    data(){
      return{
        product:[
          {
            name:'核名',
            price : 1350
          },
          {
            name:'注册',
            price : 1300
          },
          {
            name:'印章刻制',
            price : 1000
          },
          {
            name:'银行开户',
            price : 1500
          }
        ],
        form : {}
      }
    },
    computed:{
      totalPrice(){
        return this.product.reduce((total,item)=>{
          return total + item.price
        },0)
      }
    },
    methods:{
      purchase(item){
        if(sessionStorage.getItem('isLogin') === '0'){
          this.$router.push('/login')
        }
        else if(sessionStorage.getItem('userType') == 'server'){
          alert('您当前登录身份为服务方，无法下单。如需下单请退出系统使用采买方身份登录！')
        }
        else{
          this.form.ber_id = this.$store.getters.getInfo.ber_id
          this.form.or_kind = 1
          this.form.or_product = item.name
          this.form.or_money = item.price
          this.form.ser_id = ''
          this.form.or_pay = 0
          this.form.or_url = ''

          this.$router.push({
            name:'Pay',
            params:{
              form : this.form
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .process img{
    width: 100%;
    height: 200px;
  }
  .step{
    /*padding-left: 20px;*/
    margin: 10px 0;
  }
  .stepItem{
    padding: 0;
    width: 250px;
    height: 100px;
    border: 1px solid #ada9a9;
    margin: 10px;
    text-align: center;
  }
   .title{
    width: 80%;
    border-bottom: 2px solid #ada9a9;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
  }
  h3{
    margin: 0;
  }
  .money{
    height: 60px;
    line-height: 60px;
    font-size: 25px;
    color: #e20e3e;
  }
  .totalItem{
    padding: 0;
    width: 180px;
    height: 100px;
    border: 1px solid #9ec4ea;
    margin: 10px;
    text-align: center;
  }
  .purchase{
    margin: 10px 20px;
  }
</style>